<!--
 * @Date: 2025-08-18 22:57:31
 * @LastEditors: 贾二小 erxiao.jia@outlook.com
 * @LastEditTime: 2025-08-21 22:15:26
 * @FilePath: /admin-vue/src/views/login/index.vue
-->
<script setup lang="ts">
import { getPaletteColorByNumber, mixColor } from '@/utils/color'
import PwdLogin from './modules/pwd-login.vue'

const theme = useThemeStore()

const bgThemeColor = computed(() =>
  theme.darkMode ? getPaletteColorByNumber(theme.themeColor, 600) : theme.themeColor,
)

const bgColor = computed(() => {
  const COLOR_WHITE = '#ffffff'

  const ratio = theme.darkMode ? 0.5 : 0.2

  return mixColor(COLOR_WHITE, theme.themeColor, ratio)
})
</script>

<template>
  <div
    class="relative h-full w-full flex items-center justify-center overflow-hidden"
    :style="{ backgroundColor: bgColor }"
  >
    <WaveBg :theme-color="bgThemeColor" />
    <NCard :bordered="false" class="!relative !z-4 !w-auto !rounded-[12px]">
      <div class="w-[300px] sm:w-[400px]">
        <header class="flex items-center justify-between">
          <SystemLogo class="text-[48px] text-primary sm:text-[64px]" />
          <h3 class="text-[22px] text-primary font-500 sm:text-[28px]">
            {{ $t('system.title') }}
          </h3>
          <div class="flex flex-inline items-center"></div>
        </header>
        <main class="pt-[24px]">
          <h3 class="text-[18px] text-primary font-medium">密码登录</h3>
          <div class="pt-6">
            <PwdLogin />
          </div>
        </main>
      </div>
    </NCard>
  </div>
</template>
<style scoped></style>
